<template>
  <div class="add-content">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-switch
              style="display:inline-block"
              v-model="leftValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="text 模式"
              inactive-text="tree模式"
            ></el-switch>
          </div>
          <div class="text item">
            <el-input
              v-if="leftValue"
              @change="handleLeftJson"
              type="textarea"
              :rows="number"
              placeholder="请输入内容"
              v-model="leftJsonCode"
            ></el-input>
            <json-view v-if="!leftValue" :data="leftJsonObj" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-button @click="handleDiff" :disabled="flag" class="diffBtn" type="success">DIFF</el-button>
        <el-button style="margin-top:20px;" @click="handleCheck" class="diffBtn" type="success">数据校验</el-button>
        <el-button style="margin-top:20px;" @click="handleClear" class="diffBtn" type="success">清空</el-button>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-switch
              style="display: inline-block"
              v-model="rightValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="text 模式"
              inactive-text="tree模式"
            ></el-switch>
          </div>
          <div class="text item">
            <el-input
              v-if="rightValue"
              @change="handleRightJson"
              type="textarea"
              :rows="number"
              placeholder="请输入内容"
              v-model="rightJsonCode"
            ></el-input>
            <json-view v-if="!rightValue" :data="rightJsonObj" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹窗通知 -->
    <el-dialog
      title="校验结果"
      :before-close="handleClose"
      :visible.sync="centerDialogVisible"
      width="50%"
      left
    >
      <el-tabs type="border-card">
        <el-tab-pane label="左侧校验">
          <el-row
            v-if="allDiffArr.leftOriginParArr && allDiffArr.leftOriginParArr[0]?true:false"
            style=" margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比右侧original父级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.leftOriginParArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.leftOriginChildArr && allDiffArr.leftOriginChildArr[0] ? true:false"
            style="  margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比右侧original子级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.leftOriginChildArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.leftCheckedParArr && allDiffArr.leftCheckedParArr[0]? true :false"
            style="  margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比右侧checked父级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.leftCheckedParArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.leftCheckedChildArr && allDiffArr.leftCheckedChildArr[0] ? true:false"
            style=" margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比右侧checked子级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.leftCheckedChildArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="右侧校验">
          <el-row
            v-if="allDiffArr.rightOriginParArr && allDiffArr.rightOriginParArr[0]?true:false"
            style=" margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比左侧desc父级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.rightOriginParArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.rightOriginChildArr && allDiffArr.rightOriginChildArr[0] ? true:false"
            style="  margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比左侧desc子级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.rightOriginChildArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.rightCheckedParArr && allDiffArr.rightCheckedParArr[0]? true :false"
            style="  margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比左侧desc父级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.rightCheckedParArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            v-if="allDiffArr.RightCheckedChildArr && allDiffArr.RightCheckedChildArr[0] ? true:false"
            style=" margin-bottom: 20px;"
            type="flex"
            justify="space-between"
          >
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>对比左侧desc子级验证返回结果</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="allDiffArr.RightCheckedChildArr" style="width: 100%">
                    <el-table-column prop="value" label="ID" width="50"></el-table-column>
                    <el-table-column prop="parLabel" label="所属父级" width="100"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="rightSpiceArr && rightSpiceArr[0]?true:false" label="空格校验">
          <el-row style=" margin-bottom: 20px;" type="flex" justify="space-between">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>右侧json中是否存在空格</span>
                  <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <div class="text item">
                  <el-table :data="rightSpiceArr" style="width: 100%">
                    <el-table-column prop="parLabel" label="所属父级" width="150"></el-table-column>
                    <el-table-column prop="key" label="目标Key" width="auto"></el-table-column>
                    <el-table-column prop="label" label="目标元素" width="auto"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleFalse">取 消</el-button>
        <el-button type="primary" @click="handleTrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import jsonView from "vue-json-views";
import {
  getLeftkeyPar,
  getLeftkeyChild,
  getRightOriginalKey,
  getRightOriginChildKey,
  objToArr,
  getArrDiffValue,
  isJson,
  getRightCheckedChildVal
} from "@/utils/myjs";
import { leftJson, rightJson } from "@/utils/defalute";
export default {
  components: {
    jsonView
  },
  data() {
    return {
      number: 20,
      rightValue: true,
      leftValue: true,
      centerDialogVisible: false,
      flag: true,
      leftJsonObj: Object,
      rightJsonObj: Object,
      leftJsonCode: "",
      rightJsonCode: "",
      leftParKey: [], // 左侧父级value的集合
      leftChildKey: [], // 左侧子级
      rightParOriginKey: [], // 右侧origin父级key名
      rightParCheckedKey: [], // 右侧checked父级key名
      rightChildOriginKey: [], // 右侧origin子级key名
      rightChildCheckedKey: [], // 右侧checked子级key名
      allDiffArr: Object, // 对比结果全部拿取
      // rightCheckedChildVal: [], // 右侧checked 下的val 用于判断是否存在空格
      rightSpiceArr: [] // 校验空格返回结构
    };
  },

  mounted() {
    this.leftJsonCode = JSON.stringify(leftJson, null, 4);
    this.rightJsonCode = JSON.stringify(rightJson, null, 4);
    window.addEventListener("resize", this.scrollHandle); //绑定页面滚动事件
  },
  watch: {
    leftJsonCode: function(val) {
      if (isJson(val, val) === true) {
        this.leftJsonObj = eval("(" + this.leftJsonCode + ")");
      } else {
        this.leftJsonObj = {};
      }
    },
    rightJsonCode: function(val) {
      if (isJson(val, val) === true) {
        this.rightJsonObj = eval("(" + this.rightJsonCode + ")");
      } else {
        this.leftJsonObj = {};
      }
    }
  },

  methods: {
    // 关闭回调
    handleClose() {
      this.centerDialogVisible = false;
    }, // 获取当前高度
    scrollHandle(e) {
      let top = e.currentTarget.innerHeight; // 获取页面滚动高度
      // console.log(e.currentTarget.innerHeight);
      this.number = Math.floor((top - 380) / 16.5);
    },
    // 清空数据
    handleClear() {
      this.leftJsonCode = `{
           "msg":"请输入JSON数据"
}`;
      this.rightJsonCode = `{
          "msg":"请输入JSON数据"
}`;
    },
    handleLeftJson() {
      this.flag = true;
    },
    handleRightJson() {
      this.flag = true;
    },
    // 数据校验
    handleCheck() {
      if (isJson(this.leftJsonCode, this.rightJsonCode) === true) {
        this.$options.methods.handleLeftJson();
        this.$options.methods.handleRightJson();
        if (
          JSON.parse(this.leftJsonCode).hasOwnProperty("desc") &&
          JSON.parse(this.rightJsonCode).hasOwnProperty("original") &&
          JSON.parse(this.rightJsonCode).hasOwnProperty("checked")
        ) {
          this.flag = false;
          this.$message({
            message: `格式校验通过`,
            type: "success"
          });
        } else if (JSON.parse(this.leftJsonCode).hasOwnProperty("desc")) {
          this.$message({
            message: `右侧json 格式错误请修改,缺少关键字'original'或'checked'`,
            type: "warning"
          });
        } else {
          this.$message({
            message: `左侧json 格式错误请修改, 缺少关键字 'desc'`,
            type: "warning"
          });
        }
        this.rightSpiceArr = getRightCheckedChildVal(this.rightJsonObj);
        // console.log(getRightCheckedChildVal(this.rightJsonObj));
      } else {
        this.$message.error("JSON 格式错误请重新输入！！！！");
      }
    },
    // 对比值
    handleDiff() {
      this.leftParKey = getLeftkeyPar(JSON.parse(this.leftJsonCode));
      this.leftChildKey = getLeftkeyChild(JSON.parse(this.leftJsonCode));
      this.rightParOriginKey = getRightOriginalKey(
        JSON.parse(this.rightJsonCode)
      ).rightOriginKey;
      this.rightParCheckedKey = getRightOriginalKey(
        JSON.parse(this.rightJsonCode)
      ).rightCheckedKey;

      //   child
      this.rightChildOriginKey = getRightOriginChildKey(
        JSON.parse(this.rightJsonCode)
      ).originChildKeys;
      this.rightChildCheckedKey = getRightOriginChildKey(
        JSON.parse(this.rightJsonCode)
      ).checkedChildKeys;

      /**
       *
       * @param {*} arr1  左侧desc父级数组集合
       * @param {*} arr2  右侧original 父级数组集合
       * @param {*} arr3  右侧 original 子级数组集合
       * @param {*} arr4  右侧 checked 父级数组集合
       * @param {*} arr5  右侧 checked 子级数组集合
       * @param {*} arr6  左侧desc子级数组集合
       *  leftOriginParArr: leftOriginParArr,
            rightOriginParArr: rightOriginParArr,
            leftCheckedParArr: leftCheckedParArr,
            rightCheckedParArr: rightCheckedParArr,
            leftOriginChildArr: leftOriginChildArr,
            rightOriginChildArr: rightOriginChildArr,
            leftCheckedChildArr: leftCheckedChildArr,
            RightCheckedChildArr: RightCheckedChildArr
       *
       *
       */

      this.allDiffArr = getArrDiffValue(
        this.leftParKey,
        this.rightParOriginKey,
        this.rightChildOriginKey,
        this.rightParCheckedKey,
        this.rightChildCheckedKey,
        this.leftChildKey
      ).allArr;

      // console.log(
      //   objToArr(this.allDiffArr),
      //   "   this.allDiffArr.leftCheckedChildArr"
      // );
      if (objToArr(this.allDiffArr).length > 0) {
        this.centerDialogVisible = true;
      } else {
        // this.centerDialogVisible = true;
        this.$message({
          message: `检查无差异，请放心操作`,
          type: "success"
        });
      }
    },
    handleFalse() {
      this.centerDialogVisible = false;
    },
    handleTrue() {
      this.centerDialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.add-content {
  margin-top: 70px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.diffBtn {
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
/deep/.el-textarea__inner {
  resize: none;
  border: 1px solid #00f;
}
</style>